{% extends 'base.html' %}
{% load staticfiles %}
{% load comments %}
{% load forum_tags %}
{% block style %}
    <style>
        #div_id_honeypot {
            display: none;
        }
    </style>
{% endblock style %}
{% block main %}
    <main class="col-md-8">
        <div class="card post-detail">
            <nav class="card-header">
                <a href="{% url 'forum:index' %}">django forum demo</a> >
                {% with ancestors=post.category.get_ancestors %}
                    {% if ancestors %}
                        {% for ancestor in ancestors %}
                            <a href="">{{ ancestor }}</a> >
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                <a href="{% url 'categories:posts' post.category.slug %}">{{ post.category }}</a>
            </nav>
            <div class="card-block">
                <a href="{{ post.author.get_absolute_url }}" class="pull-right"><img
                        src="{{ post.author.mugshot_thumbnail.url }}"
                        style="width: 73px;"></a>

                <h3>{{ post.title }}</h3>
                <ul class="list-inline text-muted small">
                    <li class="list-inline-item"><a
                            href="{{ post.author.get_absolute_url }}"><strong>{{ post.author.nickname }}</strong></a>
                    </li>
                    <li class="list-inline-item">
                        <time>{{ post.created|timesince }}前</time>
                    </li>
                    <li class="list-inline-item">{{ post.views }} 次点击</li>
                    {% if post.author == request.user %}
                        <li class="list-inline-item"><a href="{% url 'forum:edit' post.pk %}">编辑</a></li>
                    {% endif %}
                </ul>
                {% if post.body %}
                    <hr>
                    <div class="post-body">
                        {{ post.body_html|bleach }}
                    </div>
                {% endif %}
            </div>
        </div>
        <ul class="list-group mb-1">
            {% if post.replies.count %}
                <li class="list-group-item small text-muted"><span>{{ post.replies.count }} 回复</span> |
                    <span>直到 {{ post.latest_reply.submit_date }}</span></li>
            {% else %}
                <li class="list-group-item">目前还没有回复</li>
            {% endif %}
            {% for reply in post.replies.all %}
                <li class="list-group-item" id="c{{ reply.pk }}">
                    <div class="media">
                        <a class="media-left" href="{{ reply.user.get_absolute_url }}">
                            <img class="media-object" src="{{ reply.user.mugshot_thumbnail.url }}" alt=""
                                 style="width: 48px;">
                        </a>
                        <div class="media-body">
                            <ul class="list-inline text-muted small">
                                <li class="list-inline-item"><a
                                        href="{{ reply.user.get_absolute_url }}"><strong
                                        class="nickname">{{ reply.user.nickname }}</strong></a>
                                </li>
                                <li class="list-inline-item">
                                    <time>{{ reply.submit_date|timesince }}前</time>
                                </li>
                                {% if request.user.is_authenticated %}
                                    <li class="list-inline-item">
                                        <a href="javascript:" class="reply_btn">回复</a>
                                    </li>
                                {% endif %}
                                <li class="pull-right">{{ forloop.counter }} 楼</li>
                            </ul>
                            <div class="">
                                {{ reply.reply_html|bleach }}
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
        <div class="card">
            <div class="card-header">添加一条新回复</div>
            <div class="card-block">
                {% if user.is_authenticated %}
                    {% render_comment_form for post %}
                {% else %}
                    <a href="{% url 'account_login' %}?next={{ request.path }}">登录</a>以回复
                {% endif %}
            </div>
        </div>
    </main>
{% endblock main %}

{% block script %}
    <script>
        $(document).ready(function () {
            /*
            $('.reply_btn').on('click', function () {
                var $this = $(this);
                var $nickname = '@' + $this.parent().siblings().first().find('.nickname').first().text() + ' ';
                var $replyArea = $('#div_id_comment').find('.wmd-panel').first().find('textarea').first();
                $replyArea.val($replyArea.val() + $nickname).focus()
            });
            */

            $('.reply_btn').on('click', function () {
                var $this = $(this);
                var $nickname = '@' + $this.parent().siblings().first().find('.nickname').first().text() + ' ';
                var $replyArea = $('#div_id_comment').find('textarea').first();
                $replyArea.val($replyArea.val() + $nickname).focus()
            });


            $('#id_reply_form').submit(function () {
                $('#submit-id-submit').attr('disabled', true).val('正在提交...');
            })
        });

    </script>
{% endblock script %}